<template>
  <div class="aid">
    <div class="base">
      <p>角色分配
        <a-icon @click="closeFunction(false)" class="closeCircle" type="close-circle" />
      </p>
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="姓名">
          <a-input v-model="Name" disabled/>
        </a-form-model-item>
        <a-form-model-item label="角色" prop="RoleID">
          <a-select v-model="form.RoleID" :allowClear="true">
            <a-select-option v-for="(item, index) in roleList" :key="index" :value="item.ID">{{ item.Name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="" :wrapper-col="{ offset: 5 }">
          <el-button type="success" size="medium" class="btn2" @click="handleSubmit">
            确认分配
          </el-button>
          <el-button size="medium" style="margin-left: 10px;" @click="closeFunction(false)">
            取消
          </el-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
	import {
		getUserRole,
		updateUserRole
	} from '@/api/follow'

	export default {
		props: {
			text: Object,
			loanTypeList: Array,
			customerSourse: Array
		},
		watch: {
			text: function(text) {
				if (JSON.stringify(text) == '{}') {
					this.form = {}
				} else {
					console.log(text)
					this.Name = text.Name
					this.form.UserID = text.ID
					this.form.RoleID = text.RoleID
				}
			}
		},
		data() {
			return {
				roleList: [],
				formLayout: 'horizontal',
				CenterDropdownList: [],
				Name: '',
				form: {
					RoleID: '',
					UserID: ''
				},
				rules: {
					RoleID: [{
						required: true,
						message: '请选择角色',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			this._getRole()
		},
		methods: {
			closeFunction(flag) {
				this.$emit('closeFun', flag)
			},
			async _getRole() {
				let res = await getUserRole()
				this.roleList = res.data.data
			},
			handleSubmit(e) {
				this.$refs.ruleForm.validate(async valid => {
					if (valid) {
						let res = res = await updateUserRole(this.form)
						this.$message.success(res.data.msg)
						if (res.data.code === 1) {
							setTimeout(() => {
									this.closeFunction(true)
							}, 1000)
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.row {
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
	}

	.aid {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;
	}

	.base {
		position: fixed;
		width: 600px;
		height: 550px;
		background: #fff;
		left: 50%;
		top: 50%;
		margin-left: -300px;
		margin-top: -275px;
		overflow-y: auto;
		border-radius: 8px;
		/deep/.ant-form-item {
			margin: 20px 30px 10px 20px;
			/deep/.ant-form-item-label {
				margin-right: 10px;
				width: 110px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: right !important;
			}

			/deep/.ant-form-item-control-wrapper {
				flex: 1;
			}
		}
	}

	.base p {
		padding: 20px 0 0 20px;
		font-size: 16px;
		.closeCircle{
			font-size: 22px;
			float: right;
			margin-right: 18px;
		}
	}

	.subnav {
		margin-left: 60px;
		height: 46px;
		display: flex;
	}

	.subnav p {
		width: 100px;
		text-align: right;
	}

	.subnav input {
		width: 300px;
		height: 30px;
		border: 1px solid #DAD9DC;
		margin-left: 20px;
	}

	.ant-form-item {
		margin-bottom: 10px;
	}
</style>
